import { FC, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { getlocalStorage, setlocalStorage } from "@/helpers/localStorage";
interface IProps {
  setSearchValue(text: string): void;
}

const History: FC<IProps> = ({ setSearchValue }) => {
  const history = getlocalStorage("historyList");
  const [historyList, setHistoryList] = useState([...history]);
  const setInputValue = (value: string) => {
    setSearchValue(value);
  };
  // const handleDelete = (id: number, index: number) => {
  //   history.splice(index, 1);
  //   setlocalStorage("historyList", history);
  //   setHistoryList((current) =>
  //     current.filter((it) => {
  //       return it.id !== id;
  //     })
  //   );
  // };
  const clearHistory = () => {
    setHistoryList([]);
    setlocalStorage("historyList", []);
  };
  if (historyList.length == 0) {
    return null;
  }
  return (
    <div className={styles.History}>
      <div className={styles.historyTitle}>
        <div className={styles.text}>搜索历史</div>
        <div className={styles.icon} onClick={() => clearHistory()}>
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
          >
            <path d="M847.743 223.953H640.639c-3.132-68.921-60.177-124.029-129.858-124.029s-126.726 55.108-129.858 124.029H173.256c-17.673 0-32 14.327-32 32s14.327 32 32 32h674.487c17.673 0 32-14.327 32-32s-14.327-32-32-32z m-336.962-60.03c34.379 0 62.689 26.426 65.718 60.029H445.064c3.029-33.603 31.338-60.029 65.717-60.029zM767.743 351.79c-17.673 0-32 14.327-32 32v478.173H288.256V383.79c0-17.673-14.327-32-32-32s-32 14.327-32 32v510.173c0 17.673 14.327 32 32 32h511.487c17.673 0 32-14.327 32-32V383.79c0-17.673-14.327-32-32-32z"></path>
            <path d="M449.306 732.802V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z m191.534 0V448.208c0-17.673-14.327-32-32-32s-32 14.327-32 32v284.593c0 17.673 14.327 32 32 32s32-14.326 32-31.999z"></path>
          </svg>
        </div>
      </div>
      <div className={styles.historyListWrap}>
        {historyList.length > 0 ? (
          historyList?.map((it, index) => {
            return (
              <div className={styles.searchItem} key={index}>
                <div
                  className={styles.name}
                  onClick={() => setInputValue(it.content)}
                >
                  {it.content}
                </div>
                {/* <div
                  className={styles.delect_icon}
                  onClick={() => handleDelete(it.id, index)}
                >
                  <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                  >
                    <path d="M933.981437 165.211512l-75.00138-75.000164L512.000608 437.190797 165.019943 90.206483l-75.00138 75.000164L437.004093 512.188528 90.023428 859.167977l75.000164 75.000164 346.979449-346.979449 340.52327 340.518405 6.448881 6.45253 74.995298-74.994083-346.969718-346.973367z"></path>
                  </svg>
                </div> */}
              </div>
            );
          })
        ) : (
          <div></div>
        )}
      </div>
    </div>
  );
};

export default History;
